<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图表统计</title>
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/echarts.min.js"></script>
</head>

<body>
    <div class="container-fluid">
        <div class="row spannel_list">
            <div class="col-sm-3 col-xs-6">
                <div class="spannel">
                    <em>10015</em><span>篇</span>
                    <b>总文章数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor01">
                    <em>123</em><span>篇</span>
                    <b>日新增文章数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor02">
                    <em>35</em><span>条</span>
                    <b>评论总数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor03">
                    <em>123</em><span>条</span>
                    <b>日新增评论数</b>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row curve-pie">
            <div class="col-lg-8 col-md-8">
                <div class="gragh_pannel" id="curve_show"></div>
            </div>
            <div class="col-lg-4 col-md-4">
                <div class="gragh_pannel"  id="pie_show"></div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="column_pannel"  id="column_show"></div>
    </div>

    <script>
        var oChart = echarts.init(document.getElementById('curve_show'));
        var aList_all = [
          {'count':36,'date':'2019-04-13'},
          {'count':52,'date':'2019-04-14'},
          {'count':78,'date':'2019-04-15'},
          {'count':85,'date':'2019-04-16'},
          {'count':65,'date':'2019-04-17'},
          {'count':72,'date':'2019-04-18'},
          {'count':88,'date':'2019-04-19'},
          {'count':64,'date':'2019-04-20'},
          {'count':72,'date':'2019-04-21'},
          {'count':90,'date':'2019-04-22'},
          {'count':96,'date':'2019-04-23'},
          {'count':100,'date':'2019-04-24'},
          {'count':102,'date':'2019-04-25'},
          {'count':110,'date':'2019-04-26'},
          {'count':123,'date':'2019-04-27'},
          {'count':100,'date':'2019-04-28'},
          {'count':132,'date':'2019-04-29'},
          {'count':146,'date':'2019-04-30'},
          {'count':200,'date':'2019-05-01'},
          {'count':180,'date':'2019-05-02'},
          {'count':163,'date':'2019-05-03'},
          {'count':110,'date':'2019-05-04'},
          {'count':80,'date':'2019-05-05'},
          {'count':82,'date':'2019-05-06'},
          {'count':70,'date':'2019-05-07'},
          {'count':65,'date':'2019-05-08'},
          {'count':54,'date':'2019-05-09'},
          {'count':40,'date':'2019-05-10'},
          {'count':45,'date':'2019-05-11'},
          {'count':38,'date':'2019-05-12'},
        ];

        let aCount = [];
        let aDate = [];

        for(var i=0;i<aList_all.length;i++){
            aCount.push(aList_all[i].count);
            aDate.push(aList_all[i].date);
        }

        var chartopt = {
                  title:{
                      text: '月新增文章数',
                      left: 'center',
                      top: '10'
                  },
                  tooltip:{
                      trigger: 'axis'
                  },
                  legend: {
                      data:['新增文章'],
                      top: '40'
                  },
                  toolbox: {
                      show : true,
                      feature : {
                          mark : {show: true},
                          dataView : {show: true, readOnly: false},
                          magicType : {show: true, type: ['line','bar']},
                          restore : {show: true},
                          saveAsImage : {show: true}
                      }
                  },
                  calculable : true,               
                  xAxis : [
                      {
                          name: '日',
                          type : 'category',
                          boundaryGap : false,
                          data :aDate
                      }
                  ],        
                  yAxis : [
                      {
                          name: '月新增文章数',
                          type : 'value'
                      }
                  ],      
                  series : [
					        {
					            name:'新增文章',
					            type:'line',
					            smooth:true,
					            itemStyle: {normal: {areaStyle: {type: 'default'}, color: '#f80'}, lineStyle: {color: '#f80'}},
					            data:aCount
                            }],
                            areaStyle:{
						        normal:{
						            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						                offset: 0,
						                color: 'rgba(255,136,0,0.39)'
						            }, {
						                offset: .34,
						                color: 'rgba(255,180,0,0.25)'
						            },{
						                offset: 1,
						                color: 'rgba(255,222,0,0.00)'
						            }])

						        }
						    },
                  grid: {
                      show: true,             
                      x:50,
                      x2:50,
                      y:80,
                      height:220
                  }                 
            };

        oChart.setOption(chartopt);


        var oPie = echarts.init(document.getElementById('pie_show'));
        var oPieopt =  
        {
          title : {
              top:10,
              text: '分类文章数量比',
              x:'center'
          },
          tooltip : {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          color:['#5885e8','#13cfd5','#00ce68','#ff9565'],
          legend: {
              x : 'center',
              top:65,
              data:['奇趣事','会生活','爱旅行','趣美味']
          },
          toolbox: {
              show : true,
              x : 'center',
              top:35,
              feature : {
                  mark : {show: true},
                  dataView : {show: true, readOnly: false},
                  magicType : {
                      show: true, 
                      type: ['pie', 'funnel'],
                      option: {
                          funnel: {
                              x: '25%',
                              width: '50%',
                              funnelAlign: 'left',
                              max: 1548
                          }
                      }
                  },
                  restore : {show: true},
                  saveAsImage : {show: true}
              }
          },
          calculable : true,
          series : [
              {
                  name:'访问来源',
                  type:'pie',
                  radius: ['45%', '60%'],
                  center: ['50%', '65%'],
                  data:[
                      {value:300, name:'奇趣事'},
                      {value:100, name:'会生活'},
                      {value:260, name:'爱旅行'},                   
                      {value:180,name:'趣美味'}
                  ]
              }
          ]
      };
      oPie.setOption(oPieopt);



      var oColumn = this.echarts.init(document.getElementById('column_show'));
        var oColumnopt =  
              {
                title:{
                    text: '文章访问量',
                    left: 'center',
                    top: '10'
              },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['奇趣事','会生活','爱旅行','趣美味'],
                    top:'40'          
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
               xAxis : [
                    {
                        type : 'category',
                        data : ['1月','2月','3月','4月','5月']
                    }
                ],
                yAxis : [
                    {
                        name : '访问量',
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'奇趣事',
                        type:'bar',
                        barWidth:20, 
                        itemStyle:{
                           normal: {areaStyle: {type: 'default'}, color: '#fd956a'}
                        },
                        data:[800, 708, 920, 1090, 1200]
                    },
                    {
                        name:'会生活',
                        type:'bar',
                        barWidth:20, 
                        itemStyle:{
                           normal: {areaStyle: {type: 'default'}, color: '#2bb6db'}
                        },
                        data:[400, 468, 520, 690, 800]
                    },
                    {
                        name:'爱旅行',
                        type:'bar',
                        barWidth:20, 
                        itemStyle:{
                           normal: {areaStyle: {type: 'default'}, color: '#13cfd5'}
                        },
                        data:[500, 668, 520, 790, 900]
                    },
                    {
                        name:'趣美味',
                        type:'bar',
                        barWidth:20, 
                        itemStyle:{
                           normal: {areaStyle: {type: 'default'}, color: '#00ce68'}
                        },
                        data:[600, 508, 720, 890, 1000]
                    }
                ],
                grid: {
                    show: true, 
                    x:50,
                    x2:30,            
                    y:80,
                    height:260
                },
                dataZoom: [//给x轴设置滚动条
                 {
                     start:0,//默认为0
                     end: 100-1000/31,//默认为100
                     type: 'slider',
                     show: true,
                     xAxisIndex: [0],
                     handleSize: 0,//滑动条的 左右2个滑动条的大小
                     height:8,//组件高度
                     left:45, //左边的距离
                     right:50,//右边的距离
                     bottom: 26,//右边的距离
                     handleColor: '#ddd',//h滑动图标的颜色
                     handleStyle: {
                         borderColor: "#cacaca",
                         borderWidth: "1",
                         shadowBlur: 2,
                         background: "#ddd",
                         shadowColor: "#ddd",
                     }
                  }]
            };
            oColumn.setOption(oColumnopt);

    </script>


</body>

</html>